<template>
  <view class="emoji-grid-container">
    <!-- 循环渲染表情图片 -->
    <view class="emoji-item" v-for="(image, index) in emojis" :key="index">
		<view class="img" @click.stop="clickenjoy(image)">{{image}}</view>
	 </view>
       
  </view>

</template>

<script>
export default {
	name:"expression",
  data() {
    return {
		 emojis: ['😀', '😃', '😄', '😆', '😉', '😊', '😋', '😎'],
	        
    };
  },

  methods: {
    // 获取图片完整路径的方法
   clickenjoy(image){
		this.$emit('clickenjoy',image)
		console.log(image)
	}
  }
};
</script>

<style lang="scss" scoped>
.emoji-grid-container {
  display: flex;
  flex-direction: row;
  background-color: white;
  margin: 10px,10px,10px,10px;
  height: 230px;
  flex-wrap: wrap;
}

.emoji-item {
  width: 12.5%; /* 一行显示 10 个，每个元素宽度为 10% */
  box-sizing: border-box;
  padding: 5px;}
  .img{
  width: 100%;
  font-size: 60rpx;
  height: 70rpx;
 border: 1px solid #ccc; /* 添加边框 */
 border-radius: 5px; /* 添加圆角 */
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  }



</style>